div(
	layout="column"
	layout-fill)

	div.topContainer(
		layout-align="center center")

		md-tabs.md-border-bottom.md-autoselect(
			id="compareTabs"
			layout-fill
			md-center-tabs="true"
			layout-align="center center"
			md-selected="0")

			md-tab.diff(
				id="{{compareType.type + 'CompareTab'}}"
				ng-click="vm.compareInNewMode(compareType)"
				ng-repeat="compareType in vm.compareTypes"
				label="{{compareType.label}}")

				div.modelTypeSelection(
					ng-if="!vm.isModelClash(compareType.type)"
					id="{{compareType.type + 'ModelTypeSection'}}"
					layout="row"
					layout-align="center center")

						div.modelType(
							ng-click="vm.setModelType('base')"
							flex="100"
							layout-align="center center"
							ng-style="{ background: vm.getModelTypeStyle('base', 'background'), color: vm.getModelTypeStyle('base', 'color') }")
							span(ng-if="vm.isFederation()") Base models
							span(ng-if="!vm.isFederation()") Base model

						div.modelType(
							ng-click="vm.setModelType('target')"
							flex="100"
							layout-align="center center"
							ng-style="{ background: vm.getModelTypeStyle('target', 'background'), color: vm.getModelTypeStyle('target', 'color') }")
							span(ng-if="vm.isFederation()") Target models
							span(ng-if="!vm.isFederation()") Target model

				md-content(flex, ng-if="vm.isModelClash(compareType.type)")
					h3.selfDiffWarning Model can't clash with itself! Try differencing with a revision.

				md-content.modelListHolder(flex, ng-if="!vm.isModelClash(compareType.type)")

						div(ng-if="vm.loadingComparison")
							tdr-progress(
								info="vm.loadingInfo"
								flex
								layout-fill)

						div(ng-if="!vm.loadingComparison && model"
							ng-repeat="model in vm[vm.modelType + 'Models'] track by $index")

							div.md-padding.compareModel(layout="row", layout-align="start center")

								md-button.modelSides.compareVisibility(
									ng-if="vm.isFederation()"
									ng-click="vm.toggleModelVisibility(model)")

									md-icon.angular-material-icons.visible(ng-if="model.visible") check_box
									md-icon.angular-material-icons.invisible(ng-if="!model.visible") check_box_outline_blank

								md-button.modelSides.compareVisibility(
									ng-if="!vm.isFederation()")
									md-icon.angular-material-icons() check_box


								div(ng-if="vm.modelType === 'base'" flex layout="column")
									h5.modelText {{model.name}}
									span.revisionText(ng-if="vm.modelType === 'base'")  {{model.baseRevisionTag}}

								md-menu(
									flex
									md-offset="300 20"
									layout="column"
									ng-if="vm.modelType === 'target'")

									div(flex ng-click="$mdOpenMenu($event)" layout="row")
										div(flex layout="column")
											h5.modelText {{model.name}}
											span.revisionText(ng-if="vm.modelType === 'target'") {{model.targetRevision[vm.mode].tag}}
											span.revisionText(ng-if="vm.modelType === 'base'")  {{model.baseRevisionTag}}
										md-icon.angular-material-icons expand_more
										md-tooltip(md-direction="right") Change Revision
									md-menu-content
										md-menu-item(
											ng-repeat="revision in model.revisions")

											md-button(
												ng-click="vm.setTargetRevision(model, revision)")
												span(ng-if="revision.name !== model.targetRevision[vm.mode].name") {{revision.tag || vm.revisionTimestamp(revision.timestamp)}}
												span.selectedRev(ng-if="revision.name === model.targetRevision[vm.mode].name") {{revision.tag || vm.revisionTimestamp(revision.timestamp)}}
												span
												span.authorDate ({{revision.author}})
							md-divider


		div.bottomContainer(
			md-padding)

			div(layout="row")
				md-radio-group.compareState(
					layout="row"
					ng-model="vm.compareState"
					layout-align="center center")

					md-radio-button(
						value="base"
						ng-click="vm.changeCompareState('base')"
						ng-disabled="!vm.canChangeCompareState") Base {{ vm.isFed ? Federation : Model }}


					md-radio-button(
						value="compare"
						ng-click="vm.changeCompareState('compare')"
						ng-disabled="!vm.canChangeCompareState") Compare


					md-radio-button(
						value="target"
						ng-click="vm.changeCompareState('target')"
						ng-disabled="!vm.canChangeCompareState") Target {{ vm.isFed ? Federation : Model }}

				md-button.md-fab.md-mini.md-icon-button.md-accent.compareButton(
					style="background-color: {{vm.getButtonColor()}}"
					ng-disabled="!vm.canCompare()"
					ng-click="vm.compare()")
					md-icon.angular-material-icons compare
					md-tooltip(ng-if="!vm.compareEnabled" md-direction="top") Compare with {{vm.compareTypes[vm.mode].label}}
					md-tooltip(ng-if="vm.compareEnabled" md-direction="top") Disable {{vm.compareTypes[vm.mode].label}}

